<template>
  <div class="attend_add_form">
    <div class="attend_add">
      <div class="main_info">
        <div class="main_info_one">
          <div class="select_li">
            <el-date-picker
              v-model="search.time"
              type="month"
              placeholder="请选择时间"
              value-format="yyyy-MM"
              size="small"
              @change="selectChange"></el-date-picker>
          </div>
          <div class="select_li">
            <el-select
              v-model="search.leaveType"
              @change="selectChange"
              clearable
              placeholder="请选择类型"
              size="small">
              <el-option v-for="item in leaveList" :key="item.id" :label="item.formName" :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="select_li">
            <el-select
              v-model="search.dailyStatus"
              @change="selectChange"
              clearable
              placeholder="请选择状态"
              size="small">
              <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="main_info_one">
          <el-dropdown size="small">
            <el-button type="primary" size="small">
              <i class="el-icon-plus"></i>
              选择考勤表单
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <div @click="newInfor(tabs)" v-for="tabs in tabList" :key="tabs.id">
                <el-dropdown-item>{{ tabs.formName }}</el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="info_one_main" v-if="tableData.length > 0">
        <el-scrollbar class="infor_left">
          <div class="left_con_list">
            <div
              class="infor_left_one"
              :class="listActiveId == item.dailyId ? 'is_select' : ''"
              v-for="(item, index) in tableData"
              :key="item.dailyId"
              @click="lookOneTabel(item, index)">
              <div class="infor_left_one_title">
                <div class="info_text">
                  {{ item.formName }}
                </div>
                <!-- <div class="cancel_right_lu" v-if="item.regStatus == '1'">补录</div> -->
                <div class="cancel_right_lu" v-if="item.isCanceled == '1'">已销假</div>
              </div>
              <div class="infor_left_org_time">
                <div class="info_status">{{ moment(item.createTime).format('YYYY-MM-DD') }}</div>
                <div
                  class="cancel_right"
                  :class="
                    item.dailyStatus == '0' ? 'r_btn_red' : item.dailyStatus == '1' ? 'r_btn_success' : 'r_btn_primary'
                  ">
                  {{ item.statusDesc }}
                </div>
              </div>
            </div>
          </div>
          <el-pagination
            background
            layout="pager,total"
            :current-page="tablePage.currentPage"
            :page-size="tablePage.pageSize"
            :total="tablePage.totalResult"
            @current-change="onPageChange"
            hide-on-single-page
            :pager-count="5"></el-pagination>
        </el-scrollbar>
        <div class="infor_right">
          <AttendOneRight staticsShow="1" ref="inforDetail" @backPage="backPage" @backForm="newInfor" />
        </div>
      </div>
      <div class="infor_main_h" v-else>
        <div class="full_no">
          <empty title="暂无考勤数据"></empty>
        </div>
      </div>

      <!-- 新建 start -->
      <XnDialog
        :title="tabsOne.formName"
        :visible.sync="inforDiaShow"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="76%"
        class="branch_dialog"
        @close="inforDiaShow = false">
        <AttendanceAdd v-if="inforDiaShow" :tabsOne="tabsOne" @addSuccess="addSuccess" @cancelData="cancelData" />
      </XnDialog>
      <!-- 查看上报材料 end -->
    </div>
  </div>
</template>

<script>
import AttendanceAdd from './components/AttendanceAdd' // 注册
import AttendOneRight from './components/AttendOneRight'
import XnDialog from '@com/xnDialog.vue'
import { listAttendanceDaily, listAttendanceFormType } from '@apis/api-attendance.js'
import moment from 'moment'
export default {
  components: {
    AttendanceAdd,
    AttendOneRight,
    XnDialog,
  },
  props: {},
  data() {
    return {
      search: {
        time: '',
        leaveType: '',
        dailyStatus: '',
        userId: '',
        selOrg: '',
        selUser: '',
        qryType: '1',
        dailyId: '',
      },
      tableData: [],
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
      },
      inforDiaShow: false,
      listActiveId: '',
      formId: '',
      oneItem: {},
      leaveList: [], // 表单类型
      statusList: [
        { name: '处理中', id: '0' },
        { name: '已通过', id: '1' },
        { name: '不通过', id: '2' },
        { name: '已退回', id: '3' },
        { name: '已撤回', id: '4' },
      ],
      moment: moment,
      tabList: [
        // { name: '请假单', id: '1' },
        // { name: '公务外出单', id: '2' },
        // { name: '销假单', id: '3' },
        // { name: '错时上班', id: '4' },
        // { name: '补卡单', id: '5' },
        // { name: '调休单', id: '6' },
      ],
      tabsOne: {},
    }
  },
  watch: {},
  created() {
    this.search.dailyId = this.$route.query.id || ''
    this.listAttendanceFormType()
    this.getPage('1')
  },
  mounted() {},
  methods: {
    listAttendanceFormType() {
      listAttendanceFormType({}).then(res => {
        this.leaveList = [...res.data]
        this.tabList = [...res.data]
      })
    },
    newInfor(tabs) {
      this.inforDiaShow = true
      this.tabsOne = tabs
    },
    onPageChange(e) {
      this.tablePage.currentPage = e
      this.search.dailyId = ''
      this.getPage('1')
    },
    handleSizeChange(e) {
      this.tablePage.pageSize = e
      this.search.dailyId = ''
      this.getPage('1')
    },
    getPage(type) {
      const search = {
        userId: '',
        createDate: this.search.time,
        formId: this.search.leaveType,
        dailyStatus: this.search.dailyStatus,
        qryType: this.search.qryType,
        selUser: this.search.selUser,
        selOrg: this.search.selOrg,
        dailyId: this.search.dailyId,
      }
      listAttendanceDaily({
        currentPage: this.tablePage.currentPage,
        pageSize: this.tablePage.pageSize,
        param: { ...search },
      }).then(res => {
        this.tableData = res.data.content || []
        if (res.data.content.length > 0) {
          if (type === '1' && this.search.dailyId) {
            this.tablePage.currentPage = res.data.pageNum
            let breakDaily = false
            for (const i in this.tableData) {
              if (this.tableData[i].isAssign === '1') {
                this.listActiveId = this.tableData[i].dailyId
                this.formId = this.tableData[i].formId
                this.oneItem = this.tableData[i]
                breakDaily = true
                break
              }
            }
            if (!breakDaily) {
              this.listActiveId = this.tableData[0].dailyId
              this.formId = this.tableData[0].formId
              this.oneItem = this.tableData[0]
            }
          } else if (type === '1' && this.search.dailyId === '') {
            this.listActiveId = this.tableData[0].dailyId
            this.formId = this.tableData[0].formId
            this.oneItem = this.tableData[0]
          } else {
            let breakTable = false
            for (const i in this.tableData) {
              if (this.tableData[i].dailyId === this.listActiveId) {
                this.listActiveId = this.tableData[i].dailyId
                this.formId = this.tableData[i].formId
                this.oneItem = this.tableData[i]
                breakTable = true
                break
              }
            }
            if (!breakTable) {
              this.listActiveId = this.tableData[0].dailyId
              this.formId = this.tableData[0].formId
              this.oneItem = this.tableData[0]
            }
          }
          this.$nextTick(() => {
            this.$refs.inforDetail.getDetail(this.listActiveId, this.formId, this.oneItem)
          })
        }
        this.tablePage.totalResult = res.data.totalSize
      })
    },
    selectChange() {
      this.tablePage = {
        currentPage: 1,
        pageSize: 8,
        totalResult: 0,
      }
      this.search.dailyId = ''
      this.getPage('1')
    },
    addSuccess() {
      this.inforDiaShow = false
      this.search.dailyId = ''
      this.getPage('1')
    },
    cancelData() {
      this.inforDiaShow = false
    },

    backPage(item) {
      this.listActiveId = item.dailyId
      this.formId = item.formId
      this.oneItem = item
      this.search.dailyId = ''
      this.getPage('2')
    },
    lookOneTabel(item, index) {
      if (this.listActiveId === item.dailyId) return
      this.listActiveId = item.dailyId
      this.formId = item.formId
      this.oneItem = item
      this.$nextTick(() => {
        this.$refs.inforDetail.getDetail(this.listActiveId, this.formId, this.oneItem)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.el-dropdown {
  vertical-align: top;
}
/deep/.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
/deep/.el-dropdown-menu__item {
  line-height: 40px;
  padding: 0 25px;
  font-size: 16px;
}
.attend_add_form {
  height: 100%;
  font-size: 14px;

  .attend_add {
    height: 100%;
    .main_info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 50px;
      .main_info_one {
        display: flex;
        .select_li {
          display: flex;
          align-items: center;
          margin-right: 20px;
        }
        /deep/.el-input__inner {
          border: 1px solid #dcdfe6;
        }
        /deep/.el-range-separator {
          padding-right: 15px;
        }
        /deep/.el-dropdown {
          .el-button--primary {
            span {
              font-size: 16px;
            }
          }
        }
      }
      .btn_search {
        color: #ffffff;
        background-color: #004db6;
        border-color: #004db6;
      }
    }
    .info_one_main {
      height: calc(100% - 50px);
      display: flex;
      margin-top: 2px;
      .r_btn_success {
        color: #67c23a;
      }
      .r_btn_primary {
        color: #e6a23c;
      }
      .r_btn_red {
        color: #f56c6c;
      }
      .infor_left {
        height: calc(100% - 10px);
        width: 300px;
        border: 1px solid #e5e5e5;
        margin-right: 10px;
        overflow-y: auto;
        .left_con_list {
          margin: 10px 0;
          padding: 0 10px;
        }
      }
      .el-pagination {
        text-align: right;
      }
      .infor_right {
        height: calc(100% - 10px);
        width: calc(100% - 310px);
        border: 1px solid #e5e5e5;
      }
      .infor_left_one {
        padding: 5px 8px;
        // border-bottom: 1px solid #e5e5e5;
        cursor: pointer;
        margin-bottom: 10px;
        background-color: #e4ebf0;
      }
      .is_select {
        // background-color: #1852a3;
        background-color: #7497c8;
        color: #ffffff;
        .infor_left_one_time {
          color: #ffffff;
        }
        .r_btn_success,
        .r_btn_primary,
        .r_btn_red {
          color: #fff;
        }
      }
      .infor_left_one_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // height: 40px;
        word-break: break-all;
        margin: 5px 0 10px;
      }
      .info_text {
        font-size: 16px;
        word-break: break-all;
      }
      .infor_left_org_time {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .info_status {
          word-break: keep-all;
          flex-wrap: wrap;
          white-space: nowrap;
          margin-right: 10px;
        }
      }
      .tiem {
        font-size: 14px;
      }
      .cancel_right {
        // color: #E6A23C;
        font-size: 14px;
      }
      .cancel_right_lu {
        background-color: #fdeed7;
        border-radius: 4px;
        padding: 2px 6px;
        font-size: 14px;
        color: #86642c;
        word-break: keep-all;
        margin-left: 10px;
        width: 60px;
        min-width: 60px;
        text-align: center;
      }
    }
    .infor_main_h {
      height: calc(100% - 70px);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #ccc;
    }
  }
}
</style>
